<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box1{width:400px;border: solid 1px black;margin: 50px auto;}
        .box1 .cont{position:relative;}
        .box1 h2{margin:10px 0;padding:10px 0;background: #efefef;}
        .box1 p{position: absolute;left:0;top:0;margin: 0;background: #ccc;
            width:200px;font-size: 14px;display: none;z-index: 1;}
        .box1 em{position: absolute;left:0;top:0;right:0;bottom:0;z-index: 2;} */

        /* .box2{position: relative;}
        .box2 span{top:0;left: 0;position:absolute;color: red;} */

        .a{width:20px;height:20px;background: black;color: #fff;text-align: center;
            line-height: 20px;position: absolute;left:-20px;top:-20px;}
    </style>
</head>
<body>
    <!-- <div class="box1">
        <div class="cont">
            <h2>台湾是中国神圣领土不可分割的一部分。</h2>
            <p>台湾是中国神圣领土不可分割的一部分。台湾是中国神圣领土不可分割的一部分。
                台湾是中国神圣领土不可分割的一部分。台湾是中国神圣领土不可分割的一部分。</p>
            <em></em>
        </div>
        <div class="cont">
            <h2>台湾是中国神圣领土不可分割的一部分。</h2>
            <p>台湾是中国神圣领土不可分割的一部分。台湾是中国神圣领土不可分割的一部分。
                台湾是中国神圣领土不可分割的一部分。台湾是中国神圣领土不可分割的一部分。</p>
            <em></em>
        </div> -->

        <!-- <input type="text" placeholder="这是默认提示" value="a">
        <div class="box2">
        <input type="text" class="txt" value="a">
        <span>这是默认提示</span> -->

        <div class="a">0</div>
        <div class="a">1</div>
        <div class="a">2</div>
        <div class="a">3</div>
        <div class="a">4</div>
        <div class="a">5</div>
        <div class="a">6</div>
        <div class="a">7</div>
        <div class="a">8</div>
        <div class="a">9</div>
    </div>
    </div>
    <script>
        // js中常见的兼容问题，及其处理方案（5+）
        // 采用非行内样式的获取方式
        // function getStyle(ele, attr){
        //     if(ele.currentStyle){
        //         return ele.currentStyle[attr];
        //     }else{
        //         return getComputedStyle(ele)[attr];
        //     }
        // }
        // 浏览器兼容
        // var e = eve || window.event;
        // 鼠标事件目标：触发事件的元素
        // console.log(eve.target);     // 正常浏览器
        // console.log(eve.srcElement); // IE低版本
        // 键盘事件：兼容处理
        // var code = e.keyCode || e.which;
        // 阻止默认事件
        // function stopDefault(e){
        //     if(e.preventDefault){
        //         e.preventDefault();
        //     }else{
        //         e.returnValue = false;
        //     }
        // }
        // 事件监听式绑定事件的兼容处理
        // function addEvent(ele, type, cb){
        //     if(ele.attachEvent){
        //         ele.attachEvent("on"+type, cb);
        //     }else{
        //         ele.addEventListener(type, cb);
        //     }
        // }
        // 事件监听式删除事件的兼容处理
        // function removeEvent(ele, type, cb){
        //     if(ele.detachEvent){
        //         ele.detachEvent("on"+type, cb);
        //     }else{
        //         ele.removeEventListener(type, cb);
        //     }
        // }

        // 5. 跟随鼠标的提示框
        // var em = document.querySelectorAll("em")
        // var p = document.querySelectorAll("p")

        // for(var i=0;i<em.length;i++){
        //     em[i].index = i;
        //     em[i].onmouseover = function(){
        //         p[this.index].style.display = "block";
        //     }
        //     em[i].onmouseout = function(){
        //         p[this.index].style.display = "none";
        //     }
        //     em[i].onmousemove = function(eve){
        //         var e = eve || window.event;
        //         p[this.index].style.left = e.offsetX + "px";
        //         p[this.index].style.top = e.offsetY + "px";
        //     }
        // }

        // 6. 输入框默认提示
        // var txt = document.querySelector(".box2 .txt");
        // var span = document.querySelector(".box2 span");

        // if(txt.value.length === 0){
        //     span.style.display = "block"
        // }else{
        //     span.style.display = "none"
        // }

        // txt.oninput = function(){
        //     if(this.value.length === 0){
        //         span.style.display = "block"
        //     }else{
        //         span.style.display = "none"
        //     }
        // }

        // span.onmousedown = function(eve){
        //     var e = eve || window.event;
        //     e.preventDefault();
        // }


        // 7. 鼠标移动轨迹 , 一连串元素跟随鼠标移动
        var a = document.querySelectorAll(".a");
    
        document.onmousemove = function(eve){
            var e = eve || window.event;

            for(var i=a.length-1;i>0;i--){
                a[i].style.left = a[i-1].offsetLeft + "px";
                a[i].style.top = a[i-1].offsetTop + "px";
            }

            a[0].style.left = e.pageX + "px";
            a[0].style.top = e.pageY + "px";
        }

    </script>
</body>
</html>